// 引入react
import * as React from 'react';
import {StyleSheet, View, Text, ScrollView,TouchableOpacity} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import AllStyle from '../../../../style';
import {HeaderTitle} from '../../../../componet/settingComponent/HeaderTitle';
import {TabItem} from '../../../../componet/settingComponent/TabItem';
import {CardItem} from '../../../../componet/settingComponent/CardItem';
import {getDate} from '../../../../utils/DateUtils';
import {getDaySignRecord} from '../../../../api/empActual';
import {BrLine} from '../../../../componet/settingComponent/BrLine';
import {Loading} from '../../../../utils/Loading';

/**
 * @Description:打卡明细
 * @author TangYong
 * @date 2023/2/10
 */
export class ClockingDetails extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            TeamStatisticsData: {
                dueNum: 0,
                unclockedList: [],
                yetSignList: [],
            },
            choseVal: this.props.route.params.choseVal,
        };
    }

    //生命周期：组件挂载后
    componentDidMount() {
        this.getData(this.props.route.params.date);
    }

    getData = (date) => {

        let pr = {};
        pr.expectSignDate = date + ' 00:00:00';
        Loading.show();
        getDaySignRecord(pr).then(res => {
            Loading.hidden();
            let data = res.data;
            this.setState({TeamStatisticsData: data});
            console.log(data);
        }).catch(err => {
            Loading.hidden();
        }).finally(()=>{
            Loading.hidden();
        });
    };
    //方法
    back = () => {
        this.props.navigation.goBack();
    };
    goto = (name, params) => {

        const route = {
            name: name,
            params: {
                //routePathName: this.props.route.name,
                ...params,
            },

        };
        this.props.navigation.navigate(route);
    };
    setChoseVal = (val) => {
        this.setState({choseVal: val});
    };

    //DOM
    render() {
        return (
            <SafeAreaView edges={['top', 'left', 'right', 'bottom']} style={{flex: 1, backgroundColor: '#FFF'}}>
                <View style={AllStyle.container}>
                    <HeaderTitle goBack={() => {
                        this.back();
                    }} headtitle={'打卡明细'}
                    />
                    <TabItem ItemOne={'已打卡'} ItemTwo={'应到未打卡'} setVal={
                        (val) => {
                            this.setChoseVal(val);
                        }} choseVal={this.state.choseVal}></TabItem>
                    <ScrollView style={AllStyle.padding15}>

                        {this.state.choseVal&&<View style={AllStyle.card}>
                            {this.state.TeamStatisticsData.yetSignList.map((item, index) => {
                                return (
                                    <View key={index}>

                                        {index > 0 && <BrLine></BrLine>}
                                        <TouchableOpacity onPress={()=>{
                                            this.goto('allUserStatistics',{date:this.props.route.params.date,userId:item.userEntity.userId})
                                        }}>
                                            <CardItem title={item.userEntity.username} value={'打卡'}></CardItem>
                                        </TouchableOpacity>



                                    </View>);
                            })}
                        </View>}
                        {this.state.choseVal==false&&
                        <View style={AllStyle.card}>
                            {this.state.TeamStatisticsData.unclockedList.map((item, index) => {
                                return (
                                    <View key={index}>

                                        {index > 0 && <BrLine></BrLine>}
                                        <TouchableOpacity onPress={()=>{
                                            this.goto('allUserStatistics',{date:this.props.route.params.date,userId:item.userEntity.userId})
                                        }}>
                                        <CardItem title={item.userEntity.username} value={'缺勤'}></CardItem>
                                        </TouchableOpacity>

                                    </View>);
                            })}
                        </View>}
                    </ScrollView>
                </View>
            </SafeAreaView>
        );
    }

}

const style = StyleSheet.create({
    //样式
});

